<template>
    <div class="flyDuck-app-home-main-page">
        <!--搜索区域-->
        <div class="flyDuck-app-home-main-page-query">
            <el-form ref="queryForm" :model="queryParam" :inline="true">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="queryParam.roleName" size="small" @keydown.enter.native="getRoleTableData"  placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="getRoleTableData" icon="el-icon-search">搜索</el-button>
                    <el-button size="mini" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--按钮区域-->
        <div class="flyDuck-app-home-main-page-button">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="openAddDialog" v-has="'/system/sysRoleController/addRole'">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <!--表格区域-->
        <div class="flyDuck-app-home-main-page-table">
            <el-table :data="roleTableData"  size="mini" height="400px" >
                <el-table-column align="center" label="序号" type="index" width="70">
                    <template slot-scope="scope">
                        <span>{{ (page - 1) * size + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="roleName" label="角色名称"></el-table-column>
                <el-table-column align="center" prop="dataScope" label="数据范围" :formatter="dataScopeFormatter"></el-table-column>
                <el-table-column align="center" prop="sort" label="显示顺序"></el-table-column>
                <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="openUpdateDialog(scope.row)" v-has="'/system/sysRoleController/updateRole'">编辑</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteRole(scope.row)" v-has="'/system/sysRoleController/deleteRole'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页区域-->
        <div class="flyDuck-app-home-main-page-pagination">
            <el-pagination @current-change="currentChange" @size-change="sizeChange" background layout='sizes, prev, pager, next, jumper, ->, total' :total="total"></el-pagination>
        </div>
        <!--弹窗-->
        <div class="flyDuck-app-home-main-page-dialog">
            <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
                <el-form ref="roleForm" :rules="rules" :model="roleForm"  :validate-on-rule-change="false" label-width="80px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="角色名称" prop="roleName">
                                <el-input v-model="roleForm.roleName" placeholder="请输入角色名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="数据权限" prop="dataScope">
                                <el-select v-model="roleForm.dataScope" clearable placeholder="请选择数据权限">
                                    <el-option  v-for="item in dataScopeSelectOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="排序" prop="sort">
                                <el-input-number v-model="roleForm.sort" :min="1"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="状态" prop="status">
                                <el-switch style="margin-top: 10px" v-model="roleForm.status" active-value="1" inactive-value="2" active-color="#13ce66" ></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="菜单权限" prop="menuIds">
                                <el-tree
                                        ref="menuTree"
                                        class="tree-border"
                                        :data="menuTreeSelectOptions"
                                        show-checkbox
                                        default-expand-all
                                        node-key="id"
                                        empty-text="加载中，请稍后"
                                        :props="defaultProps"
                                ></el-tree>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import {getRolePageList,getRoleDetail,addRole,updateRole,deleteRole,getRoleSelect} from '@/api/system/role'
    import {getDictOptionList} from '@/api/system/dict'
    import {getMenuTreeSelect} from '@/api/system/menu'
    export default {
        components:{Treeselect},
        name: "SysRole",
        data() {
            return {
                /*搜索区域*/
                queryParam:{
                    roleName:'',
                },
                /*按钮区域*/
                /*表格区域*/
                roleTableData:[],
                /*分页区域*/
                total:0,
                page:1,
                size:10,
                /*弹窗区域*/
                dialogVisible:false,
                title:'',
                statusOptions:[],
                dataScopeSelectOptions:[],

                menuTreeSelectOptions:[],
                defaultProps: {
                    children: "children",
                    label: "menuName"
                },
                roleForm:{
                    roleName:'',
                    dataScope:'',
                    sort:'',
                    status:'1',

                },
                rules:{
                    roleName:[{required:true, message:'请输入角色名称', trigger:'blur'}],
                    dataScope:[{required:true, message:'请选择数据权限', trigger:'change'}],
                },
            };
        },
        mounted() {
            this.getRoleTableData();
            this.getMenuTreeSelectOptions();
            this.getStatusOptions();
            this.getDataScopeSelectOptions();
        },
        methods: {
            /*搜索区域*/
            /*按钮区域*/
            openAddDialog(){
                this.title = '添加角色';
                this.resetRoleForm();
                this.dialogVisible = true;
            },
            resetRoleForm(){
                this.roleForm = {
                    roleName:'',
                    dataScope:'',
                    sort:'',
                    status:'1',
                };
                this.$nextTick(() => {
                    this.$refs.menuTree.setCheckedKeys([])
                })
            },
            openUpdateDialog(data){
                this.resetRoleForm();
                this.title = '编辑角色';
                //回显
                getRoleDetail(data.id).then(data => {
                    this.roleForm = data;
                    var that = this;
                    data.menuIds.forEach(value => {
                        that.$refs.menuTree.setChecked(value, true, false);
                    });
                })
                this.dialogVisible = true;
            },
            resetQuery(){
                this.queryParam.roleName = '';
                this.page = 1;
                this.getUserTableData();
            },
            /*表格区域*/
            getStatusOptions(){
                getDictOptionList(`status`).then(data => {
                    this.statusOptions = data;
                })
            },
            getDataScopeSelectOptions(){
                getDictOptionList(`sys_role_dataScope`).then(data => {
                    debugger
                    this.dataScopeSelectOptions = data;
                })
            },
            dataScopeFormatter(row, column) {
                return this.selectDictLabel(this.dataScopeSelectOptions, row.dataScope);
            },
            statusFormatter(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            getRoleTableData(){
                getRolePageList(this.queryParam,this.page,this.size).then(data=>{
                    this.roleTableData = data.rows;
                    this.total = data.total;
                })
            },
            getMenuTreeSelectOptions(){
                getMenuTreeSelect().then(data=>{
                    this.menuTreeSelectOptions = data;
                })
            },
            deleteRole(data){
                this.$confirm(`是否删除${data.roleName}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteRole(data.id).then(data=>{
                        if(data){
                            this.getRoleTableData();
                        }
                    })
                })
            },
            /*分页区域*/
            currentChange(currentPage){
                this.page = currentPage;
                this.getRoleTableData();
            },
            sizeChange(size){
                this.size = size;
                this.getRoleTableData();
            },
            /*弹窗区域*/
            // 所有菜单节点数据
            getMenuAllCheckedKeys() {
                // 目前被选中的菜单节点
                let checkedKeys = this.$refs.menuTree.getCheckedKeys();
                // 半选中的菜单节点
                let halfCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys();
                checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
                return checkedKeys;
            },
            submitForm(){
                if(this.roleForm.id){
                    //修改
                    this.$refs['roleForm'].validate(valid=>{
                        if(valid){
                            this.roleForm.menuIds = this.getMenuAllCheckedKeys();
                            updateRole(this.roleForm).then(data => {
                                if(data){
                                    this.dialogVisible = false;
                                    this.getRoleTableData();
                                }
                            })
                        }
                    })
                }else {
                    //添加
                    this.$refs['roleForm'].validate(valid=>{
                        if(valid){
                            this.roleForm.menuIds = this.getMenuAllCheckedKeys();
                            addRole(this.roleForm).then(data => {
                                if(data){
                                    this.dialogVisible = false;
                                    this.getRoleTableData();
                                }
                            })
                        }
                    })
                }


            },
        },
    }
</script>
<style>
</style>

